@include('Home.head')
<body>
<div class="container" id="app">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
            <a href="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="">提交订单</a>
        </h1>
        <div class="am-header-right am-header-nav">
            <a href="#right-link" class="">
                <i class="am-header-icon  am-icon-home"></i>
            </a>
        </div>
    </header>
	<div class="gray-panel">
    	<div class="paoduct-title-panel">
        	<h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">1</span> 确认订单信息</h2>
			<div v-if="order.ordertype == 1">
                <div class="cart-list-panel">
                    <ul class="am-avg-sm-1 cart-panel-ul">
                        <li>
                            <div class="imgpanel"><a href="#"><img style="height: 100px" :src="order.mallGoods.img" class="am-img-responsive" /></a></div>
                            <div class="infopanel">
                                <h3><a href="#">@{{ order.mallGoods.goodsname }}</a></h3>
                                <p>品牌：新世界</p>
                                <p>价格：<span class="red2 bold">@{{ order.price }}</span>
                                {{--<p>库存：<span class="red2 bold">100</span> 件</p>--}}
                                {{--<p>运费：<span class="red2 bold">3</span> 元</p>--}}
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="cart_foot">共选中：@{{ order.mall_num }}， 总价：<span class="red2 bold" id="total_amount">@{{ order.price }}</span>元</div>
            </div>
            <div v-if="order.ordertype == 2">
                <div class="cart-list-panel">
                    <ul class="am-avg-sm-1 cart-panel-ul">
                        <li v-for="val in order.OrderComment">
                            <div class="imgpanel"><a v-on:click="jump(val.goodsid)"><img :src="val.img" class="am-img-responsive" /></a></div>
                            <div class="infopanel">
                                <h3><a v-on:click="jump(val.goodsid)">@{{ val.goodsname }}</a></h3>
                                <p>品牌：新世界</p>
                                <p>价格：<span class="red2 bold">@{{ val.price }}</span> 元  X @{{ val.number }}
                                <p>单价：<span class="red2 bold">@{{ val.totalPrice }}</span> 元</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="cart_foot">共选中：<span class="red2 bold" id="total_good">@{{ order.totalNumber }}</span>种商品，总数量：<span class="red2 bold" id="total_jifen">@{{ order.totalShopNumber }}</span> 个， 总价：<span class="red2 bold" id="total_amount">@{{ order.originalprice }}</span>元</div>
            </div>

            {{--<div class="cart_foot">共选中：<span class="red2 bold" id="total_good">@{{ total }}</span> 种商品，总价：<span class="red2 bold" id="total_amount">@{{ totalPrice }}</span> 元，总数量：<span class="red2 bold" id="total_jifen">@{{ totalNumber }}</span> 个</div>--}}
        </div>
        <div class="paoduct-title-panel">
            <h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">2</span> 收货地址</h2>
            <div class="partners-title-panel">
                <div class="partners-title-panel-title" style="height: 80px;padding-left: 10px;">
                    @{{ address.name }}  &nbsp;@{{ address.phone }} <a href="/home/member/addresslist" v-show="address.default" style="color: red;float: right;margin-right: 20px">修改地址</a><br>
                    <a style="width:100%;height:49px;font-size: 12px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">@{{ address.province }}@{{ address.city }}@{{ address.district }}@{{ address.address }}</a>
                    {{--<span class="am-fr am-icon-trash-o" v-on:click="del(val.id,index)"></span><span class="am-fr am-icon-pencil-square-o" v-on:click="edit(val.id)"></span>--}}
                </div>
            </div>
        </div>
        <div class="paoduct-title-panel">
        	<h2 class="checkout-h2"><span class="am-badge am-round am-badge-warning ">3</span> 支付方式</h2>
            <ul class="am-list am-text-sm my-pay-ul">
            	<li><a href="javascript:;" rel="1" class="hover"><span class="am-fr"><i class="am-icon-check-circle"></i>&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="/img/home/user/wechat.png" class="payimg" />&nbsp;&nbsp;&nbsp;&nbsp;微信支付</a></li>
                <li><a href="javascript:;" rel="2"><span class="am-fr"><i class="am-icon-circle-thin"></i>&nbsp;&nbsp;</span><img src="/img/home/user/alipay.png" class="payimg" /> 支付宝支付</a></li>
                <li><a href="javascript:;" rel="3"><span class="am-fr"><i class="am-icon-circle-thin"></i>&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;<img src="/img/home/user/money.png" class="payimg" />&nbsp;&nbsp;&nbsp;&nbsp;余额支付 &nbsp;&nbsp; <samll class="my-pay-yue">金币余额：<span class="red2">1001</span>  &nbsp;&nbsp;<span class="red2">充值</span></samll></a></li>
            </ul>
            <script>
			$(document).ready(function(e) {
                $(".my-pay-ul li > a").click(function(){
					$(".my-pay-ul li > a").removeClass('hover');
					$(".my-pay-ul li > a i").removeClass('am-icon-check-circle').addClass('am-icon-circle-thin');
					$(this).addClass('hover');
					var val = $(this).attr('rel');
					$("#paytype").val(val);
					$(this).find('i').removeClass('am-icon-circle-thin').addClass('am-icon-check-circle');


				});
            });
			</script>
            <div>
            	<ul class="am-avg-sm-2 am-text-center">
                	<li class="am-text-center am-padding-sm"><button type="button" class="am-btn am-btn-danger am-btn-block am-radius">确定支付</button></li>
                    <li class="am-text-center am-padding-sm"><button type="button" class="am-btn am-btn-success am-btn-block am-radius">继续购物</button></li>
                </ul>
            </div>
        </div>
    </div>
    @include('Home.foot')
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: '我的订单',
            order:{},
            address:{},
        },
        methods: {
            //初始化 系统管理员列表
            initialize: function () {
                var id = this.obtain('id');
                if (id > 0) {
                    $.post("/home/order", {'_token': '{{csrf_token()}}',class:'find',id:id}, function (res) {
                        if (res.code) {
                            app.order = res.data.order
                            app.address = res.data.address
                        } else {
                            layer.msg(res.data);
                        }
                    });
                }
            },
            jump:function (id) {
                window.location.href='/home/microShop/productmicro?id='+id;
            },
            //获取url id
            obtain:function (val) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == val){
                        return pair[1];
                    }
                }
            },
        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    })
</script>
</html>
